<template>
    <div class="mainerRight">
      <div class="header">
        <div class="info">
          <!-- 图片 -->
          <div class="cover">
            <img :src="playList.coverImgUrl" />
            <div class="mask"></div>
          </div>
          <!-- 文字信息 -->
          <div class="cnt">
            <div class="hd">
              <h4>{{ playList.name }}</h4>
            </div>
            <div class="user">
              <i class="icn" style="overflow: hidden"></i>
              <span class="sep">huhooo_BMnC</span>
              <span class="fc">2018-05-28 创建</span>
            </div>
            <!-- 底部按钮 -->
            <div class="btns">
              <a class="play" title="播放">
                <i class="ply"></i>
                <span>播放</span>
              </a>
              <a class="add"></a>
              <a class="dis">
                <span>收藏</span>
              </a>
              <a class="share">
                <span>分享</span>
              </a>
              <a class="download">
                <span>下载</span>
              </a>
              <a class="comment">
                <span>评论</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <SongList :playList="songList" :songList="SongList"></SongList>
      <Comment></Comment>
    </div>
  </template>
  
  <script>
  import SongList from "./SongList";
  import Comment from "./Comment";
  import { gedanxiang, reqSong } from "@/request/api";
  export default {
    name: "toplistmainerright",
    components: { SongList, Comment },
    data() {
      return {
        playList: {},
        num: "刚刚更新",
        songList: {},
        SongList: {},
      };
    },
    computed: {
      id() {
        if (this.$route.query.id == undefined) return "2244735104";
        return this.$route.query.id;
      },
    },
    watch: {
      id() {
        this.getPlayList();
      },
    },
    methods: {},
    created() {
      //获取用户歌单详情
      gedanxiang(this.id, sessionStorage.getItem("cookie")).then((res) => {
        console.log(res.data);
        this.playList = res.data.playlist;
      });
    },
  };
  </script>
  
  <style lang='less' scoped>
  .mainerRight {
    width: 740px;
    background-color: #fff;
    float: right;
  
    .header {
      width: 100%;
      padding: 40px;
  
      .info {
        width: 100%;
        height: 100%;
        display: flex;
  
        .cover {
          width: 158px;
          height: 158px;
          padding: 3px;
          border: 1px solid #ccc;
          position: relative;
  
          img {
            width: 150px;
            height: 150px;
            display: block;
            margin: auto;
            margin-top: 3px;
          }
  
          .mask {
            width: 150px;
            height: 150px;
            position: absolute;
            z-index: 2;
            top: 3px;
            left: 3px;
            background: url("../images/coverall.png") no-repeat -230px -380px;
          }
        }
  
        .cnt {
          width: 473px;
          height: 114px;
          margin-top: 20.5px;
          padding-left: 33px;
  
          .hd {
            width: 473px;
            height: 24px;
  
            h4 {
              font-weight: normal;
              font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif !important;
              font-size: 20px;
              color: #333;
            }
          }
  
          .user {
            margin-top: 5px;
            width: 100%;
            height: 35px;
            line-height: 35px;
            margin-bottom: 20px;
            font-size: 12px;
  
            i {
              display: inline-block;
              width: 13px;
              height: 13px;
              position: relative;
              top: 2px;
              margin-left: 3px;
              background: url("../images/icon.png") no-repeat -18px -682px;
            }
  
            .sep {
              margin-right: 10px;
              margin-left: 5px;
            }
          }
  
          .btns {
            height: 31px;
            display: flex;
  
            .play {
              width: 60px;
              padding-left: 5px;
              background: url("../images/button2.png") no-repeat 0 -1652px;
              text-align: center;
              line-height: 29px;
              // height: 31px;
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
  
              i {
                width: 20px;
                height: 18px;
                margin: 7px 0 2px 2px;
                float: left;
                background: url("../images/button2.png") no-repeat 0 -1622px;
              }
  
              span {
                color: #fff;
                font-size: 12px;
              }
  
              &:hover {
                cursor: pointer;
              }
            }
  
            .add {
              width: 31px;
              height: 31px;
              margin-right: 5px;
              background: url("../images/button2.png") no-repeat 0 -1588px;
  
              &:hover {
                cursor: pointer;
                background-position: -40px -1588px;
              }
  
              &:active {
                background-position: -80px -1588px;
              }
            }
  
            .dis {
              margin-right: 6px;
              height: 100%;
              background: url("../images/button2.png") no-repeat;
              background-position: 0px -1063px;
  
              span {
                display: inline-block;
                height: 100%;
                background: url("../images/button2.png") no-repeat right -1106px;
                line-height: 30px;
                padding-left: 30px;
                padding-right: 4px;
                font-size: 12px;
                color: #ccc;
              }
  
              &:hover {
                color: #666;
                cursor: pointer;
              }
            }
  
            .share {
              height: 31px;
              margin-right: 6px;
              float: left;
              min-width: 23px;
              cursor: pointer;
              background: url("../images/button2.png") no-repeat;
              background-position: 0 -1225px;
  
              span {
                height: 100%;
                display: inline-block;
                line-height: 30px;
                padding-left: 28px;
                padding-right: 4px;
                background: url("../images/button2.png") no-repeat;
                background-position: right -1020px;
                font-size: 12px;
              }
  
              &:hover {
                color: #666;
                cursor: pointer;
              }
            }
  
            .download {
              margin-right: 5px;
              height: 31px;
              min-width: 23px;
              cursor: pointer;
              background: url("../images/button2.png") no-repeat;
              background-position: 0 -2761px;
  
              span {
                height: 100%;
                display: inline-block;
                line-height: 30px;
                padding-left: 28px;
                padding-right: 8px;
                background: url("../images/button2.png") no-repeat;
                background-position: right -1020px;
                font-size: 12px;
              }
  
              &:hover {
                color: #666;
                cursor: pointer;
              }
            }
  
            .comment {
              margin-right: 5px;
              height: 31px;
              min-width: 23px;
              cursor: pointer;
              background: url("../images/button2.png") no-repeat;
              background-position: 0 -1465px;
  
              span {
                height: 100%;
                display: inline-block;
                line-height: 30px;
                padding-left: 28px;
                padding-right: 8px;
                background: url("../images/button2.png") no-repeat;
                background-position: right -1020px;
                font-size: 12px;
              }
  
              &:hover {
                color: #666;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
  </style>